<template>
	<view class="component" v-if="show">
		<view class="sub-mask" @click="onClose"></view>
		<view class="sub-block">
			<view class="b-main">
				<view class="s-title">设置头像</view>
				<view class="s-avatar">
					<image :src="image || '/static/imgs/user.png'" mode="aspectFill"></image>
				</view>
				<!-- #ifdef  MP-WEIXIN -->
				<button class="s-upload open-data-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">上传头像</button>
				<!-- #endif -->
				<!-- #ifdef  H5 -->
				<view class="s-upload" @click="onUploadAvatar">上传头像</view>
				<!-- #endif -->
			</view>
			<view class="b-save" @click="onClose">
				<view class="s-icon iconfont icon-roundclose"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		updateUserInfo
	} from '@/service/api/user.js'
	import {
		uploadImage
	} from '@/service/api/common.js'
	import {
		compressImage
	} from '@/common/util.js'
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			image: {
				type: String,
				default: ''
			}
		},
		data() {
			return {};
		},
		methods: {
			onChange(image) {
				this.$emit('bindChange', image);
			},
			onClose() {
				this.$emit('bindClose');
			},
			onChooseAvatar(e) {
				console.log('onChooseAvatar', e)
				let imageUrl = e.detail.avatarUrl
				uploadImage(imageUrl).then(([err, res]) => {
					console.log('uploadImage', err, res)
					if (!err) {
						updateUserInfo(res.path).then(([err, res]) => {
							console.log('updateUserInfo', err, res)
							if (!err) {
								this.onChange(imageUrl)
							}
						})
					}
				})
			},
			onUploadAvatar(e) {
				console.log('onUploadAvatar', e)
				uni.chooseImage({
					count: 1, // 1张
					sizeType: ['compressed'], // 压缩图
				}).then(([err, res]) => {
					console.log('chooseImage', err, res)
					if (!err) {
						compressImage(res.tempFiles[0], 500, 500).then(([err, res]) => {
							console.log('compressImage', err, res)
							if (!err) {
								let imageUrl = res
								uploadImage(imageUrl).then(([err, res]) => {
									console.log('uploadImage', err, res)
									if (!err) {
										updateUserInfo(res.path).then(([err, res]) => {
											console.log('updateUserInfo', err, res)
											if (!err) {
												this.onChange(imageUrl)
											}
										})
									}
								})
							}
						})
					}
				})
			}
		}
	};
</script>

<style lang="scss">
	.sub-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba($color: #000000, $alpha: 0.6);
	}

	.sub-block {
		position: fixed;
		left: 50%;
		top: 48%;
		transform: translate(-50%, -50%);
		z-index: 100;
		width: 400upx;

		image {
			width: 100%;
		}
	}

	.b-main {
		padding: 40upx 0;
		background: #fff;
		border-radius: 20upx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.s-title {
			font-size: 28upx;
			color: #383838;
		}

		.s-avatar {
			margin-top: 40upx;
			width: 160upx;
			height: 160upx;

			image {
				width: 160upx;
				height: 160upx;
				border-radius: 80upx;
			}
		}

		.s-upload {
			padding: 0 40upx;
			margin-top: 40upx;
			height: 80upx;
			line-height: 80upx;
			border-radius: 40upx;
			text-align: center;
			color: #fff;
			font-size: 28upx;
			background: #DA5650;

			&.disable {
				background: rgba($color: #DA5650, $alpha: 0.2);
			}
		}
	}

	.b-save {
		position: absolute;
		bottom: -120upx;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.s-icon {
			padding: 20upx;
			color: #fff;
			font-size: 56upx;
		}
	}
</style>
